<template>
  <div class="mbmh">
    <HomeTop />
    <div class="mbmh_beijing">
      <div class="lunbo">
        <img src="../assets/imgs/product/mbmh/mbmh_banner_pic.jpg" alt="" />
      </div>
      <div class="yun_soft animate-el">
        <img class="animate-el" src="../assets/imgs/product/mbmh/banner_tips.png" alt="" />
      </div>
    </div>
    <div class="mbmh_effect">
      <ul>
        <li>
          <div class="fisrt_bg1">
            <img src="../assets/imgs/product/mbmh/introduce_bg.png" alt="" />
            <img class="zoomin" src="../assets/imgs/product/mbmh/introduce_pic_1.png" alt="" />
            <div class="fisrt_bg1_wenzi">
              <h2 class="animate-el">异业联盟，资源共享</h2>
              <div class="fisrt_bg1_wenzi_p">
                <p class="animate-el">
                  商家与商家之间可以形成异业联盟，客户资源共享，
                  利益分配标准化、流程化，轻松达到资源可持续变现的目的
                </p>
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="fisrt_bg2">
            <img src="../assets/imgs/product/mbmh/introduce_bg.png" alt="" />
            <img class="zoomin" src="../assets/imgs/product/mbmh/introduce_pic_2.png" alt="" />
            <div class="fisrt_bg2_wenzi">
              <h2 class="animate-el">免费入驻，简单便捷</h2>
              <div class="fisrt_bg2_wenzi_p">
                <p class="animate-el">
                  零成本快速入驻美帮美汇平台，在平台上发布任意一个活动即可启用；
                  厂家直供，低价购入、按需发货，避免压货！
                </p>
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="fisrt_bg3">
            <img src="../assets/imgs/product/mbmh/introduce_bg.png" alt="" />
            <img class="zoomin" src="../assets/imgs/product/mbmh/introduce_pic_3.png" alt="" />
            <div class="fisrt_bg3_wenzi">
              <h2 class="animate-el">玩转社交电商，解锁多种盈利方式</h2>
              <div class="fisrt_bg3_wenzi_p">
                <p class="animate-el">
                  鼓励会员主动分享传播，吸引新用户，培养老用户的消费习惯，提升忠诚度，
                  一次锁定会员多次盈利，提升商城复购率
                </p>
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="fisrt_bg4">
            <img src="../assets/imgs/product/mbmh/introduce_bg.png" alt="" />
            <img class="zoomin" src="../assets/imgs/product/mbmh/introduce_pic_4.png" alt="" />
            <div class="fisrt_bg4_wenzi">
              <h2 class="animate-el">合伙人模式，全民营销</h2>
              <div class="fisrt_bg4_wenzi_p">
                <p class="animate-el">
                  将客户转化成门店最忠实的合伙人，商家可灵活制定推荐奖励佣金，
                  提高客户分销积极性，开启“全民营销时代”！
                </p>
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="fisrt_bg5">
            <img src="../assets/imgs/product/mbmh/introduce_bg.png" alt="" />
            <img class="zoomin" src="../assets/imgs/product/mbmh/introduce_pic_5.png" alt="" />
            <div class="fisrt_bg5_wenzi">
              <h2 class="animate-el">分销模式，灵活管理</h2>
              <div class="fisrt_bg5_wenzi_p">
                <p class="animate-el">
                  多触点推广，以点及面三层拓客，帮助您快速搭建完善的营销体系；
                  分销订单、分销佣金等一键查看，轻松管理成千上万的代理商
                </p>
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="fisrt_bg6">
            <img src="../assets/imgs/product/mbmh/introduce_bg.png" alt="" />
            <img class="zoomin" src="../assets/imgs/product/mbmh/introduce_pic_6.png" alt="" />
            <div class="fisrt_bg6_wenzi">
              <h2 class="animate-el">更懂运营，精准营销</h2>
              <div class="fisrt_bg6_wenzi_p">
                <p class="animate-el">
                  十余年行业经验积淀，更懂实体企业运营模式（线上+线下），
                  提供后期持续深度运营服务，一对一教你如何做运营、搞营销！
                </p>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <HomeBottom />
  </div>
</template>

<script>
import Observer from "../utils/observer";
import HomeTop from "@/components/Hometop.vue";
import HomeBottom from "@/components/Homebottom.vue";
export default {
  name: "Qht",
  components: {
    HomeTop,
    HomeBottom,
  },
   mounted() {
    const els = document.querySelectorAll(".animate-el");
    this.Observer = Observer(
      {
        els: els,
      },
      function (el) {
        el.style.visibility = "visible";
        el.classList.add("animate__fadeInDown");
      }
    );
    const els2 = document.querySelectorAll(".zoomin");
    this.Observer2 = Observer(
      {
        els: els2,
      },
      function (el) {
        el.style.visibility = "visible";
        el.classList.add("animate__zoomIn");
      }
    );
    let registerData = {
      companyName: "",
      phoneNumber: "",
      linkman: "",
      companyAdress: "",
      leaveMessage: "",
    };
  },
};
</script>

<style>
.lunbo img {
  width: 100%;
  height: 655px;
}
.yun_soft {
  width: 834px;
  height: 140px;
  margin: auto;
  margin-top: 124px;
}
.mbmh_effect ul {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  margin: auto;
  width: 1348px;
  margin-bottom: 280px;
}
.mbmh_effect ul li {
  width: 615px;
  height: 756px;
  border: 1px dashed #4a96ea;
  margin-top: 254px;
  border-radius: 35px;
  position: relative;
}
.mbmh_effect ul li:nth-child(1) {
  margin-top: 180px;
}
.mbmh_effect ul li:nth-child(2) {
  margin-top: 180px;
}
.fisrt_bg1 img {
  width: 615px;
  height: 756px;
  position: absolute;
  top: -34px;
  left: 27px;
}
.fisrt_bg1 img:nth-child(2) {
  max-width: 66%;
  height: auto;
  position: absolute;
  top: 29px;
  left: 146px;
}
.fisrt_bg1_wenzi {
  width: 428px;
  height: 148px;
  /* background-color: tomato; */
  position: absolute;
  top: 425px;
  left: 117px;
}
.fisrt_bg1_wenzi h2 {
  color: rgb(168, 113, 220);
  font-weight: 600;
  text-align: left;
  font-size: 40px;
}
.fisrt_bg1_wenzi_p {
  width: 432px;
  height: 84px;
  margin-top: 25px;
  border-top: 1px dashed #4590e6;
}
.fisrt_bg1_wenzi_p p {
  color: rgb(183, 176, 167);
  font-size: 23px;
  line-height: 34px;
  margin-top: 10px;
}
.fisrt_bg2 img {
  width: 615px;
  height: 756px;
  position: absolute;
  top: -34px;
  left: 27px;
}
.fisrt_bg2 img:nth-child(2) {
  max-width: 66%;
  height: auto;
  position: absolute;
  top: 46px;
  left: 110px;
}
.fisrt_bg2_wenzi {
  width: 428px;
  height: 148px;
  /* background-color: tomato; */
  position: absolute;
  top: 425px;
  left: 117px;
}
.fisrt_bg2_wenzi h2 {
  color: rgb(168, 113, 220);
  font-weight: 600;
  text-align: left;
  font-size: 40px;
}
.fisrt_bg2_wenzi_p {
  width: 432px;
  height: 84px;
  margin-top: 25px;
  border-top: 1px dashed #4590e6;
}
.fisrt_bg2_wenzi_p p {
  color: rgb(183, 176, 167);
  font-size: 23px;
  line-height: 34px;
  margin-top: 10px;
}

.fisrt_bg3 img {
  width: 615px;
  height: 756px;
  position: absolute;
  top: -34px;
  left: 27px;
}
.fisrt_bg3 img:nth-child(2) {
  max-width: 66%;
  height: auto;
  position: absolute;
  top: 9px;
  left: 104px;
}
.fisrt_bg3_wenzi {
  width: 428px;
  height: 148px;
  /* background-color: tomato; */
  position: absolute;
  top: 425px;
  left: 117px;
}
.fisrt_bg3_wenzi h2 {
  color: rgb(168, 113, 220);
  font-weight: 600;
  text-align: left;
  font-size: 40px;
}
.fisrt_bg3_wenzi_p {
  width: 432px;
  height: 84px;
  margin-top: 25px;
  border-top: 1px dashed #4590e6;
}
.fisrt_bg3_wenzi_p p {
  color: rgb(183, 176, 167);
  font-size: 23px;
  line-height: 34px;
  margin-top: 10px;
}

.fisrt_bg4 img {
  width: 615px;
  height: 756px;
  position: absolute;
  top: -34px;
  left: 27px;
}
.fisrt_bg4 img:nth-child(2) {
  max-width: 66%;
  height: auto;
  position: absolute;
  top: 65px;
  left: 96px;
}
.fisrt_bg4_wenzi {
  width: 428px;
  height: 148px;
  /* background-color: tomato; */
  position: absolute;
  top: 425px;
  left: 117px;
}
.fisrt_bg4_wenzi h2 {
  color: rgb(168, 113, 220);
  font-weight: 600;
  text-align: left;
  font-size: 40px;
}
.fisrt_bg4_wenzi_p {
  width: 432px;
  height: 84px;
  margin-top: 25px;
  border-top: 1px dashed #4590e6;
}
.fisrt_bg4_wenzi_p p {
  color: rgb(183, 176, 167);
  font-size: 23px;
  line-height: 34px;
  margin-top: 10px;
}

.fisrt_bg5 img {
  width: 615px;
  height: 756px;
  position: absolute;
  top: -34px;
  left: 27px;
}
.fisrt_bg5 img:nth-child(2) {
  max-width: 66%;
  height: auto;
  position: absolute;
  top: 24px;
  left: 116px;
}
.fisrt_bg5_wenzi {
  width: 428px;
  height: 148px;
  /* background-color: tomato; */
  position: absolute;
  top: 425px;
  left: 117px;
}
.fisrt_bg5_wenzi h2 {
  color: rgb(168, 113, 220);
  font-weight: 600;
  text-align: left;
  font-size: 40px;
}
.fisrt_bg5_wenzi_p {
  width: 432px;
  height: 84px;
  margin-top: 25px;
  border-top: 1px dashed #4590e6;
}
.fisrt_bg5_wenzi_p p {
  color: rgb(183, 176, 167);
  font-size: 23px;
  line-height: 34px;
  margin-top: 10px;
}

.fisrt_bg6 img {
  width: 615px;
  height: 756px;
  position: absolute;
  top: -34px;
  left: 27px;
}
.fisrt_bg6 img:nth-child(2) {
  max-width: 66%;
  height: auto;
  position: absolute;
  top: 16px;
  left: 126px;
}
.fisrt_bg6_wenzi {
  width: 428px;
  height: 148px;
  /* background-color: tomato; */
  position: absolute;
  top: 425px;
  left: 117px;
}
.fisrt_bg6_wenzi h2 {
  color: rgb(168, 113, 220);
  font-weight: 600;
  text-align: left;
  font-size: 40px;
}
.fisrt_bg6_wenzi_p {
  width: 432px;
  height: 84px;
  margin-top: 25px;
  border-top: 1px dashed #4590e6;
}
.fisrt_bg6_wenzi_p p {
  color: rgb(183, 176, 167);
  font-size: 23px;
  line-height: 34px;
  margin-top: 10px;
}
</style>